<!--
 * @Author: your name
 * @Date: 2021-09-19 19:14:16
 * @LastEditTime: 2021-09-21 22:25:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \重构项目\briup-ej-app\src\components\chinaMap.vue
-->
<!--
 * @Author: your name
 * @Date: 2021-09-19 19:14:16
 * @LastEditTime: 2021-09-20 22:41:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup-ej-app\src\components\chinaMap.vue
-->
<template>
  <div class="echarts">
    <div :style="{ height: height, width: width,}" ref="myEchart"></div>
  </div>
</template>
<script>
import "@/assets/china.js"; // 引入中国地图数据
export default {
  name: "echarts",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "280px",
    },
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.chinaConfigure();
  },
  computed: {},
  methods: {
    chinaConfigure() {
      let myChart = this.$echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      myChart.setOption({
        // 进行相关配置
        backgroundColor: "#F8F9FB",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        visualMap: {
          // bottom: 0, // 位置调整
          // left: 0, // 位置调整
          type: "piecewise",
          itemHeight: 10,
          itemWidth: 10,
          textGap: 0,
          itemGap: 5,
          orient: "horizontal",
          pieces: [
            {
              value: 0,
              color: "#ffffff",
            },
            {
              // 颜色区间
              min: 1,
              max: 9,
              color: "#FFE5DB",
            },
            {
              min: 10,
              max: 99,
              color: "#FF6954",
            },
            {
              min: 100,
              max: 999,
              color: "#FF9883",
            },
            {
              min: 1000,
              max: 9999,
              color: "#FF6954",
            },
            {
              min: 10000,
              color: "#E93030",
            },
          ],
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: false,
          label: {
            normal: {
              // show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.4)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "地区: {b}<br />数量: {c}",
        },
        series: [
          {
            zoom: 1.3,
            type: "map",
            geoIndex: 0,
             mapType: "china",
            data: this.dataList,
            symbolSize: 10,
            mapLocation: {
              y: 50,
              x: 35,
            },
          },
        ],
      });
    },
  },
  created() {},
};
</script>